<template>
  <div class="wrapper">
    <div class="number">
      {{number}}
    </div>
    <div class="content">
      <el-row :gutter="40">
        <el-col :span="21">
          <div class="question">
            {{question}}
          </div>
          <div class="answer">
            {{answer}}
          </div>
        </el-col>
        <!--suppress HtmlDeprecatedAttribute -->
        <el-col :span="3" align="right">
          <el-button type="text" @click="handleEdit">编辑</el-button>
          <el-button type="text" @click="handleRemove" style="color: red;">删除</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XumQuestion',
  props: {
    id: {
      required: true,
      type: [String, Number]
    },
    number: {
      type: [String, Number],
      default: '00'
    },
    answer: {
      type: String,
      default: '',
      request: true
    },
    question: {
      type: String,
      default: '',
      request: true
    }
  },
  computed: {
    returnData () {
      return {
        id: this.id,
        question: this.question,
        answer: this.answer
      }
    }
  },
  methods: {
    handleEdit () {
      this.$emit('edit', this.returnData)
    },
    handleRemove () {
      this.$confirm('你正在执行删除商品FQA操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('remove', this.returnData)
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .wrapper:hover{
    background: #99999944;
  }

  .wrapper{
    cursor: pointer;
    padding: 0 30px;

    .number{
      width: 50px;
      height: 30px;
      display: inline-block;
      vertical-align: top;
      text-align: left;
      line-height: 30px;
      color: #333333;
      font-weight: 700;
    }

    .content{
      width: calc(100% - 50px);
      display: inline-block;
      text-align: left;
      line-height: 30px;

      .question{
        max-height: 30px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #333333;
        margin-bottom: 8px;
      }

      .answer{
        overflow: hidden;
        font-family: 'Lato', sans-serif;
        font-size: 16px;
        color: #777777;
      }

    }

  }

</style>
